<template>
	<view class="content">
		<h2>
			<text class="zuozhe">{{geming}}</text>
			<text class="biaoji">-</text>
			<text class="geming">{{geshou}}</text>
		</h2>
		<!-- <view class="geci">
			<view class="neirong">
				<view class="isGeCi" :class="{move:ismove}">
					<p>{{lyric}}</p>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props:['lyric','geming','geshou'],
		data() {
			return {
				ismove:false
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		margin-top: 160rpx;
		h2{
			font-size: 36rpx;
			text-align: center;
			font-weight: 400;
			.zuozhe{
				color: #fefefe;
			}
			.biaoji{
				margin: 0 4px;
				color: #fefefe;
			}
			.geming{
				font-size: 32rpx;
				color: hsla(0,0%,100%,.6);
			}
		}
		.geci{
			width: 100%;
			margin-top: 28rpx;
			.neirong{
				height: 112rpx;
				font-size: 32rpx;
				overflow: hidden;
				-webkit-mask: -webkit-linear-gradient(top,#000,#000 70%,rgba(0,0,0,0));
				text-align: center;
				color: hsla(0,0%,100%,.6);
				.isGeCi{
					transition: transform .3s ease-out,-webkit-transform .3s ease-out;
					p{
						padding-bottom: 16rpx;
					}
				}
				.move{
					transform: translateY(-32px);
				}
			}
		}
	}
</style>
